<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Tic Tac Toe</title>
        <style type="text/css">
			td 
			{
				height: 150px;
				width: 150px;
				text-align: center;
				font-size:xx-large;
			}
			#X_temp, #O_temp
			{
				display: none;
			}
		</style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
			var turn = "X"
			var spaces =  ['','','','','','','','',''];
			$(document).ready(function()
			{
				$("td").click(function()
				{
					if($(this).html() != "&nbsp;") return;
					$(this).html($("#" + turn + "_temp").html());
					spaces[$(this).attr("index")] = turn
					$.getJson("service.php", {turn: turn, spaces:spaces}, //Java Scirpt Object Notation: Json
						function(data)
						{
							if(data.mymove != undefined)
							{
								spaces[data.mymove] = "0";
								$("td:eq[" + data.myMove + "]").html($("#O_temp").html());
							}
							if(data.message != undefined)
							{
								$("#message").html(data.message)
							}
						}
					);
				});
			});
		</script></head></html>
    <html xmlns="http://www.w3.org/1999/xhtml"><head>   
	</head>

	<body>
		<? include('loginLinkControl.php'); ?>
		<h1 id="message"></h1>
    	<span id="whoseTurn"></span>'s turn
    	<table width="100%" border="1">
          <tr>
            <td index="1">&nbsp;</td>
            <td index="2">&nbsp;</td>
            <td index="3">&nbsp;</td>
          </tr>
          <tr>
            <td index="4">&nbsp;</td>
            <td index="5">&nbsp;</td>
            <td index="6">&nbsp;</td>
          </tr>
          <tr>
            <td index="7">&nbsp;</td>
            <td index="8">&nbsp;</td>
            <td index="9">&nbsp;</td>
          </tr>
        </table>
        <div id="X_temp">
        	<span style="color:red"> X </span>
        </div>
        <div id="O_temp">
        	<span style="color:blue"> O </span>
        </div>
	</body>
</html>